<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        #a {
            width: 500px;
            height: 300px;
            border: red 1px solid;
        }
    </style>
    <script type="text/javascript">

        console.log(document.getElementById("b"));


        function methodG() {
            // console.log("onload");
            console.log(document.getElementById("b"));
        }
    </script>
</head>
<body onload="methodG()">
    <div id="a" onmouseover="methodA()" onmousemove="methodB(event)" onmouseout="methodC()" >

    </div>
    <!--文本框-->
    <input id="b" type="text" onkeydown="methodD(event)" onkeyup="methodE(event)" onkeypress="methodF(event)">


    <form action="http://www.qfedu.com" onsubmit="return methodH()" method="get">
        <input id="username" type="text" name="username">
        <input id="pwd" type="password" name="pwd">
        <input id="repwd" type="password" name="repwd">
        <input type="submit" value="登录">
    </form>
</body>
<script type="text/javascript">
    function methodA() {
        console.log("onmouseover");
    }
    //event 事件对象
    function methodB(event) {
        //绝对坐标：相对于浏览器的坐标
        // console.log(event.clientX + "::" + event.clientY);
        //相对于当前元素坐标
        console.log(event.offsetX + "::" + event.offsetY);
    }

    function methodC() {
        console.log("onmouseout");
    }

    function methodD(event) {
        console.log(event.keyCode + "::" + event.key);
    }

    function methodE() {
        console.log("onkeyup");
    }
    function methodF() {
        console.log("onkeypress");
    }
    //校验：如果username 为空则不提交，不为空， 则提交
    function methodH(){
        // console.log("onsubmit");
        //获取文本框对象
        let input = document.getElementById("username");
        let pwd = document.getElementById("pwd");
        let repwd = document.getElementById("repwd");
        let username = input.value;
        let password = pwd.value;
        let repassword = repwd.value;
        // null   ""
        if(username == null || username.length == 0) {
            alert("用户名不能为空");
            return false;
        }

        if(password == null || password.trim().length == 0) {
            alert("密码不能为空");
            return false;
        }

        if(password != repassword) {
            alert("两次密码必须一致 ");
            return false;
        }
        return true;
    }


</script>
</html>